<!-- 简历表单组件 -->
<template>
  <div>
    <el-form label-width="100px" :model="resumeForm">
      <div class="form-section-title">个人概述</div>
      <el-row>
        <el-form-item label="求职者姓名">
          <el-input v-model="resumeForm.job_seeker_name" />
        </el-form-item>
        <el-form-item label="求职意向">
          <el-input v-model="resumeForm.job_intention" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="电话">
          <el-input v-model="resumeForm.phone_num" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="resumeForm.email" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="qq">
          <el-input v-model="resumeForm.qq_num" />
        </el-form-item>
        <el-form-item label="微信号">
          <el-input v-model="resumeForm.wx_num" />
        </el-form-item>
      </el-row>
      <el-form-item label="工作标签">
        <div class="row-job-tags">
          <el-row>
            <el-tag
              v-for="(item, index) in job_tags"
              :key="index"
              class="tags-item"
              closable
              :disable-transitions="false"
              @close="deleteJobTag(index)"
            >
              {{ item }}
            </el-tag>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="10" v-show="isJobTagEdit">
              <el-input v-model="jobTagText" />
            </el-col>
            <el-col :span="6" v-show="!isJobTagEdit">
              <el-button type="primary" @click="isJobTagEdit = true">添加标签</el-button>
            </el-col>
            <el-col :span="5" v-show="isJobTagEdit">
              <el-button type="primary" @click="addJobTag">保存</el-button>
            </el-col>
            <el-col :span="5" v-show="isJobTagEdit">
              <el-button @click="cancelJobTag">取消</el-button>
            </el-col>
          </el-row>
        </div>
      </el-form-item>
      <el-form-item label="优势">
        <el-input v-model="resumeForm.advantage" :rows="3" type="textarea" placeholder="请写你的个人优势" />
      </el-form-item>
      <div class="form-section-title">教育背景</div>
      <el-row>
        <el-form-item label="学校">
          <el-input v-model="resumeForm.educational_background.school" />
        </el-form-item>
        <el-form-item label="学院/系">
          <el-input v-model="resumeForm.educational_background.department" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="专业">
          <el-input v-model="resumeForm.educational_background.major" />
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="resumeForm.educational_background.qualification" placeholder="请选择学历">
            <el-option v-for="item in qualificationOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="起始时间" prop="start_time">
          <el-date-picker
            v-model="resumeForm.educational_background.start_time"
            value-format="YYYY-MM"
            type="month"
            placeholder="请选择起始月份"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="end_time">
          <el-date-picker
            v-model="resumeForm.educational_background.end_time"
            value-format="YYYY-MM"
            type="month"
            placeholder="请选择结束月份"
          />
        </el-form-item>
      </el-row>
      <div class="form-section-title">专业技能</div>
      <el-form-item label="技能描述">
        <Editor v-model:valueHtml="resumeForm.skills" height="200"></Editor>
      </el-form-item>
      <div class="form-section-title">工作经历</div>
      <el-form-item label="工作经历描述">
        <div class="row-experience" v-for="(item, index) in resumeForm.work_experience" :key="index">
          <el-row justify="space-between">
            <p class="w-company">{{ item.company }}</p>
            <p class="time">{{ `${item.start_time} ${(item.end_time === '至今' ? '' : '至 ') + item.end_time}` }}</p>
          </el-row>
          <div class="w-remarks">
            <p v-for="(tagItem, tagIndex) in item.additional_remarks" :key="tagIndex">{{ tagItem }}</p>
          </div>
          <div class="row-operate">
            <el-icon class="icon cursor" color="#0e0e0e" @click="openWorkDialog('edit', index, item)"><Edit /></el-icon>
            <el-icon class="icon cursor" color="#f00" @click="delWorkItem(index)"><Delete /></el-icon>
          </div>
        </div>
        <div>
          <el-button type="primary" @click="openWorkDialog('add')">添加工作经历</el-button>
        </div>
      </el-form-item>
      <div class="form-section-title">项目经历</div>
      <el-form-item label="项目经历描述">
        <div class="row-experience" v-for="(item, index) in resumeForm.project_experience" :key="index">
          <el-row justify="space-between">
            <p class="p-name">{{ item.project_name }}</p>
            <p class="time">{{ `${item.start_time} ${(item.end_time === '至今' ? '' : '至 ') + item.end_time}` }}</p>
          </el-row>
          <div class="p-content" v-html="item.project_content"></div>
          <div class="row-operate">
            <el-icon class="icon cursor" color="#0e0e0e" @click="openProjDialog('edit', index, item)"><Edit /></el-icon>
            <el-icon class="icon cursor" color="#f00" @click="delProjItem(index)"><Delete /></el-icon>
          </div>
        </div>
        <div>
          <el-button type="primary" @click="openProjDialog('add')">添加项目经历</el-button>
        </div>
      </el-form-item>
    </el-form>
    <WorkDialog ref="workDialogRef" v-model:visible="workDialogVisible" @confirm="getWorkForm"></WorkDialog>
    <ProjectDialog ref="projDialogRef" v-model:visible="projDialogVisible" @confirm="getProjForm"></ProjectDialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import Editor from '@/components/Editor/index.vue'
import WorkDialog from './WorkDialog.vue'
import ProjectDialog from './ProjectDialog.vue'
import { useTag } from '../hooks/useTag'

const workDialogRef = ref()
const projDialogRef = ref()

const {
  tags: job_tags,
  addTag: addJobTag,
  deleteTag: deleteJobTag,
  cancelTag: cancelJobTag,
  tagText: jobTagText,
  isTagEdit: isJobTagEdit
} = useTag()

const workDialogVisible = ref(false)
const projDialogVisible = ref(false)

const qualificationOptions = [
  {
    label: '研究生',
    value: 1
  },
  {
    label: '本科',
    value: 2
  },
  {
    label: '大专',
    value: 3
  }
]

// 简历表单
const resumeForm = ref({
  job_seeker_name: '', // 求职者姓名
  job_intention: '', // 求职意向
  phone_num: '', // 求职者电话
  email: '', // 求职者邮箱
  qq_num: '', // 求职者qq
  wx_num: '', // 微信号
  job_tags: [], // 工作标签
  advantage: '', // 优势
  educational_background: {
    school: '', // 学校
    department: '', // 学院/系
    major: '', // 专业
    qualification: 2, // 学历
    start_time: '', // 起始时间
    end_time: '' // 结束时间
  },
  skills: '', // 专业技能
  work_experience: [], // 工作经历
  project_experience: [] // 项目经历
})

const delItem = (arr, delIndex) => arr.filter((item, idx) => idx !== delIndex)

// 获取工作经历弹窗数据
const getWorkForm = ({ mode, formIndex, data }) => {
  const modeAction = {
    add: () => {
      resumeForm.value.work_experience.push({ ...data })
    },
    edit: () => {
      resumeForm.value.work_experience = resumeForm.value.work_experience.map((item, index) => (formIndex === index ? data : item))
    }
  }
  modeAction[mode]()
}

// 打开工作经历弹窗
const openWorkDialog = (mode, index, data) => {
  workDialogRef.value.open(mode, index, data)
}

// 删除工作经历项
const delWorkItem = delIndex => {
  resumeForm.value.work_experience = delItem(resumeForm.value.work_experience, delIndex)
}

// 获取项目经历弹窗数据
const getProjForm = ({ mode, formIndex, data }) => {
  const modeAction = {
    add: () => {
      resumeForm.value.project_experience.push({ ...data })
    },
    edit: () => {
      resumeForm.value.project_experience = resumeForm.value.project_experience.map((item, index) => (formIndex === index ? data : item))
    }
  }
  modeAction[mode]()
}

// 打开项目经历弹窗
const openProjDialog = (mode, index, data) => {
  projDialogRef.value.open(mode, index, data)
}

// 删除项目经历项
const delProjItem = delIndex => {
  resumeForm.value.project_experience = delItem(resumeForm.value.project_experience, delIndex)
}

defineExpose({
  resumeForm,
  job_tags
})
</script>

<style lang="scss" scoped>
.form-section-title {
  font-size: 18px;
  margin-bottom: 20px;
}
.row-job-tags {
  .tags-item {
    margin: 0 10px 10px 0;
  }
}
.row-experience {
  $operateW: 80px;
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  padding-right: $operateW;
  .time {
    font-size: 14px;
    color: #999;
  }
  .p-name,
  .w-company {
    font-weight: bold;
    color: #0e0e0e;
  }
  .w-company {
    font-size: 18px;
  }
  .w-remarks {
    p {
      margin: 10px 0;
      font-size: 14px;
      line-height: 1;
      color: #666;
    }
  }
  .p-name {
    font-size: 20px;
  }
  .p-content {
    margin-top: 10px;
  }
  .row-operate {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding-top: 6px;
    width: $operateW;
    display: flex;
    justify-content: center;
    .icon {
      margin-right: 10px;
      font-size: 18px;
    }
  }
}
</style>
